<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="./css/Shopping_cart.css" />
		<title>米泡教育</title>
	</head>
	<body>
		<!-- 侧边栏 -->
		<div class="cebianlan">
			<div class="zhixun">
				<img src="img/6咨询.png">
				<div class="zhixun1"><a href="#">咨询</a></div>
			</div>
			<div class="bangzhu">
				<img src="img/帮助.png">
				<div class="zhixun1"><a href="#">帮助</a></div>
			</div>
			<div class="weixin">
				<img src="img/微信.png" class="wiexin1">
				<div class="zhixun1"><a href="#">微信</a></div>
				<div class="weixin2">
					<span>欢迎关注米泡教育</span>
					<img src="./img/erweima.jpg">
				</div>
			</div>
			<div class="yanjing">
				<img src="img/眼睛.png">
				<div class="zhixun1"><a href="#">监督</a></div>

			</div>
			<div class="yanjing">
				<a href="#maodian"><img src="img/向上.png"></a>
			</div>

		</div>

		<!-- 导航栏 -->
		<div class="f1" id="maodian">
			<div class="container">
				<!-- 左侧 -->
				<div class="left">
					<img src="./img/head-logo.svg" alt="">
					<ul class="nav">
						<li><a href="index.html">首页</a></li>
						<li><a href="mianfei_course.html">免费课</a></li>
						<li><a href="shizhan_course.html">精品课</a></li>
					</ul>
				</div>
				<!-- 右侧 -->
				<div class="right">
					<div class="souSuo">
						<input type="text" placeholder="请输入课程" id="input" />
						<a href=""><img src="img/黄色搜索icon.png"></a>
					</div>
					<div class="gouWuChe">
						<img src="img/购物车.png">
						<span><a href="Shopping_cart.html">购物车</a></span>
					</div>
					<div class="geRenZhonXin">
						<span><a href="PersonalCenter.html">个人中心</a></span>
						<div class="touxiang">
							<img src="img/1.jpg" alt="">
							<ul class="xialacaidan">
								<!-- 下拉菜单 -->
						<li><a href="PersonalCenter.html">我的账户</a></li>
						<li><a href="PersonalCenter.html">我的课程</a></li>
						<li><a href="login.html">退出</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 第二楼 -->
		<div class="f2">
			<div class="container">
				<div class="f2_header">
					<div>我的购物车</div>
					<div>共<span>2</span>门课程</div>
				</div class="f2_body">
				<div>
					<table>
						<thead>
							<th>
								<input type="checkbox" class="check_one" />全选
							</th>
							<th>课程编号</th>
							<th>课程</th>
							<th>金额</th>
							<th>操作</th>
						</thead>
						<tbody>
							<!-- 						<tr>
							<td>
								<input type="checkbox" name="" id="" value="" />
							</td>
							<td>
								1
							</td>
							<td>
								<div>
									<img src="./img_course/mianfeike/Linux3@2x_1566529820.9514382.png" >
								</div>
								<div>
									<p>Go语言开发0基础七天入门</p>
									<p>限时折扣</p>
								</div>
							</td>
							<td>
								￥39.9
							</td>
							<td>
								<button type="button">删除</button>
							</td>
						</tr> -->
						</tbody>
					</table>
				</div>
				<div class="f2_footer">
					<span class="zongji">总金额：￥39.9</span>
					<button type="button">结算</button>
				</div>
			</div>
		</div>



		<!-- 最后一楼 -->
		<div class="foot1">
			<div class="container">
				<!-- 左边 -->
				<div class="left">
					<div class="foot-Box">
						<div class="title">关于米泡</div>
						<ul>
							<li><a href="#">关于我们</a></li>
							<li><a href="#">荣誉资质</a></li>
							<li><a href="#">网站地图</a></li>
							<li><a href="#">练习我们</a></li>
							<li><a href="#">加入我们</a></li>
						</ul>
					</div>
					<div class="foot-Box">
						<div class="title">帮助中心</div>
						<ul>
							<li><a href="#">如何购买观看</a></li>
							<li><a href="#">优惠券介绍</a></li>
							<li><a href="#">余额介绍</a></li>
							<li><a href="#">就业班课程</a></li>
							<li><a href="#">更多&gt;&gt;</a></li>
						</ul>
					</div>
					<div class="foot-Box">
						<div class="title">推荐课程</div>
						<ul>
							<li><a href="#">JavaScript训练营</a></li>
							<li><a href="#">前端开发</a></li>
							<li><a href="#">大全栈工程师</a></li>
							<li><a href="#">Linux云计算</a></li>
							<li><a href="#">数据库开发</a></li>
						</ul>
					</div>
				</div>
				<!-- 右边 -->
				<div class="right">
					<div class="gongzhonghao">
						<p>公众号</p>
						<img src="img/erweima.jpg">
					</div>
					<div class="douyinhao">
						<p>抖音号</p>
						<img src="img/douyinhao.jpg">
					</div>
				</div>
			</div>
		</div>
		<div class="foot2">
			<div class="container">
				<div class="foot2-box">
					<p>地址：武汉市黄陂区武湖街道汉口北大道1号武汉文理学院</p>
					<p>©2022-2023武汉米泡教育科技有限公司版权所有 京ICP备16378246号-1</p>
					<p><img src="img/备案.png">京公网安备 11010102002019号</p>
				</div>
			</div>
		</div>
		<script src="js/jquery-3.6.0.min.js"></script>
		<!-- <script src="js/index.js"></script> -->
		<script type="text/javascript">
			//搜索框传参
			$('#input').keydown(function(e) {
				if (e.keyCode == 13) {
					let keyword = $(this).val()
					$(window).attr('location', '/input.html?keyword=' + keyword);
				}
			})
			//请求课程列表ajax请求
			window.onload = function() {
				$.get("/shopping/course_find", data => {
					console.log(data)
					let num=data.length//获取课程个数
					$('.f2_header>div>span').text(num)
					let html = data.map(value => {
						const {
							course_id: i,
							course_title: t,
							course_image: img,
							course_fees: p,
							checked: checked,
						} = value;
						return `
					<tr>
						<td>
							<input type="checkbox" name="" id="" value="" ${checked ? 'checked':''} />
						</td>
						<td>
							${i}
						</td>
						<td>
							<div>
								<img src="${img}" >
							</div>
							<div>
								<p>${t}</p>
								<p>限时折扣</p>
							</div>
						</td>
						<td>
							￥${p}
						</td>
						<td>
							<button type="button" class="shanchu">删除</button>
						</td>
					</tr>
					`
					});
					$('tbody').append(html);
					//利用委托监听删除的点击
					$('tbody').on('click', 'td>button', function() {
						console.log(this)
						// index:获取当前删除按钮的父元素
						const index = $("tbody>tr").index($(this).parent().parent())
						console.log(index);
						// 删除当前项
						$(this).parent().parent().remove()

						// 删除课程列表ajax请求
						let id = $(this).parent().siblings("td:nth-child(2)").text()
						console.log(parseInt(id))
						let lid = parseInt(id)
						$.post(`/shopping/course_delete?lid=${lid}`, data => {
							console.log(data)
						})
						
					})
					//为全选按钮绑定变化变更事件
					$('thead input').change(function() {
						console.log(this.checked)
						// 每个商品勾选的值都和全选一致
						$('tbody :checkbox').prop('checked', this.checked)
						data.forEach(value => {
							value.checked = this.checked
						})
						updateTptal()						
					})
					//总金额:只算勾选
					function updateTptal() {
						const total = data.reduce((sum, value) => {
							const {
								course_fees: p,
								checked: checked,
							} = value;
							return sum + p * checked
						}, 0)
						$('.zongji').text('总净额:￥' + total)
					}

					updateTptal()

					//为每个元素的勾选 绑定事件
					$('tbody').on('change', ':checkbox', function() {
						// console.log(this.checked)
						// console.log($(this).parent().siblings('td:nth-child(2)').text())
						//找到 挡墙勾选框所在父元素 .body子元素的序号
						const index = $('tr').index($(this).parent().parent())
						let i = +this.checked //将布尔转换整型
						data[index-1].checked = i //勾选框的状态更新到数据里面
						updateTptal()
						$('thead :checkbox').prop(
							'checked',
							data.every(value => value.checked))
					})
					
					var arr=[];
					$('tbody').on('change', ':checkbox', function() {
						let b = $(this).parent().siblings('td:nth-child(2)').text() //选取当前勾选的课程编号
						let m = +b//转number
						//存数组统一传参
						if(this.checked==true){
							arr.push(m)
						}else if(this.checked==false){
							arr.forEach(function(item, index,arr1){
								if(item==b){
									arr1.splice(index, 1);
								}
							})
						}
						console.log(arr)
						//此处bug全选不能获取参数
						//此处bug全选情况下不能跳转
						var a= this.checked
						console.log(a)
							$('.f2_footer>button').click(function() {
								if(a==true){//未勾选时不允许跳转
									window.location.href=`orders.html?${arr}`
								}
							})
						})

//////////////////////////////////////////////
				})
			}
		</script>
	</body>
</html>
